<template>
  <div class="list">
    <!-- <el-row>
      <el-col :span="24">
        <el-button type="primary" @click="$router.push({path:'/menu/add'})">添加</el-button>
      </el-col>
    </el-row> -->
   <el-table :data="tableData" style="width: 100%">
     <el-table-column prop="id" label="序号" width="180">
     </el-table-column>
     <el-table-column prop="name" label="昵称" width="180">
     </el-table-column>
     <el-table-column prop="email" label="邮箱">
     </el-table-column>
     <el-table-column prop="status" label="状态">
       <template slot-scope="{row,index}">
         <el-switch
           :value="row.status === 0"
           active-color="#13ce66"
           inactive-color="#ff4949"
           @change="editStatus(row)">
         </el-switch>
       </template>
     </el-table-column>
     <el-table-column fixed="right" label="操作" width="100">
       <template slot-scope="{row,index}">
         <el-button @click="$router.push({path:'/member/account',query:{member_id:row.id}})" type="text" size="small">用户账号</el-button>
         <!-- <el-button type="text" size="small">编辑</el-button> -->
       </template>
     </el-table-column>
   </el-table>
   <el-pagination
     background
     layout="prev, pager, next"
     :total="total"
     :page-size="size"
     @prev-click="prev()"
     @next-click="next()"
     @current-change="currentchange"
     style="margin-top: 20px;"
     >
   </el-pagination>
  </div>


</template>

<script>
  import {
    ajaxPost
  } from "@/api/ajax"
  export default {
    name: "list",
    data() {
      return {
        tableData: [],
        page: 1,
        size: 15,
        total:0,
        current_page:1,
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        let data = {
          page: this.page,
          size: this.size,
        };
        ajaxPost('member/list', data).then(res => {
          if (res.code == 0) {
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.current_page = res.data.current_page;
          }
        })
      },
      prev(){
        this.page -= 1;
        this.getList();
      },
      next(){
        this.page += 1;
        this.getList();
      },
      currentchange(value){
         this.page = value;
         this.getList();
      },
      editStatus(val){
        ajaxPost("member/editStatus",val).then(res=>{
          if(res.code == 0){
            this.getList();
          }
        })
      }
    },
  }
</script>

<style lang="scss">
  .list {
    padding: 20px;
    box-sizing: border-box;

    .search-input {
      width: 150px;
    }

    .list-page {
      margin-top: 20px;
    }
  }
</style>
